<script setup>
import { getHotAPI } from "@/apis/home";
import { onMounted, ref } from "vue";
import HomePanel from "./HomePanel.vue";

const hotList = ref([]);
const getHotList = async () => {
  const res = await getHotAPI();
  hotList.value = res.result;
};
onMounted(() => {
  getHotList();
});
const handleHotList = () => {
  if (!hotList.value) return [];
  else return hotList.value;
};
</script>

<template>
  <HomePanel title="人气推荐" sub-title="人气推荐&nbsp;&nbsp;好多商品">
    <div class="panelMain" style="width: 74%; height: 330px; display: flex">
      <div
        class="panelMainItem"
        style="height: 100%; background-color: #e9f6ee; width: 20%"
        v-for="item in handleHotList()"
        :key="item.id"
      >
        <img v-img-lazy="item.picture" />
        <div class="itemText">
          <div
            class="name"
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100%;
              font-size: 18px;
              text-align: center;
            "
          >
            {{ item.title }}
          </div>
          <div style="text-align: center; color: #d3d0cc; margin-top: 8px">
            {{ item.alt }}
          </div>
        </div>
      </div>
    </div>
  </HomePanel>
</template>



<style scoped>
.panelMainItem {
  margin-right: 6.66%;
}
.panelMainItem:last-child {
  margin: 0;
}
</style>